<template>
    <div>
        <div class="video-playing-item">
            <video class="video" :src="videoData.content" controls="controls"></video>
            <div class="video-title">{{videoData.title || '--'}}</div>
            <div class="video-introduce-item">
                <span>发布时间：</span>
                <span>{{videoData.time.split(' ')[0] || '--'}}</span>
            </div>
            <div class="video-introduce-item">
                <span>简介：</span>
                <span>{{videoData.description || '没有更多简介了'}}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "VideoPlayingComponent",
    props:{
        videoData: {type:Object},
    },
}
</script>

<style lang="less" scoped>
@import "../../../assets/global";
.video-playing-item{
    font-family: Microsoft YaHei UI,sans-serif;
    .video{
        width:800px;
        height:480px;
    }

    .video-title{
        font-size: 18px;

        font-weight: 400;
        color: #010101;
        line-height: 16px;
        padding:10px 0;
        .line-ellipsis(1);
    }
    .video-introduce-item{
        font-size: 12px;
        font-weight: 400;
        color: #777777;
        line-height: 16px;
        padding:4px 0;
        .line-ellipsis(2);
    }
}
</style>
<style lang="less" scoped>
/** pad版 */
@media (min-width: 768px) {
    .video {
        width: 100%!important;
    }
}
/** 纯手机版 */
@media (max-width: 768px) {
    .video {
        width: 100vw!important;
        height:60vw!important;
    }
}
</style>